//
let form = layui.form;
let layer = layui.layer;

// ?获取id
// console.log(location);
// location.search 地址中的查询字符串结果
// console.log(location.search);  // ?id=6787

// 通过split方法拆分成数组
let arr = location.search.split("?id=");
// console.log(arr); //  ['', '6787']
const id = arr[1];
// console.log(id);

// todo=========== 封面裁切效果
// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");
// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}



// todo ==========获取文章类别的下拉框数据========
axios.get("/my/article/cates").then(({ data }) => {
    const newArr = data.data
        .map(({ Id, name }) => `<option value="${Id}">${name}</option>`)
        .join("");
    $("select[name=cate_id]").append(newArr);

    //刷新select选择框渲染
    form.render("select");

    // todo============发送ajax请求，获取对应文章详情
    // 请求带上文章的id
    axios.get("/my/article/" + id).then((res) => {
        console.log(res);
        // 给表单赋值
        //formTest 即 class="layui-form" 所在元素属性 lay-filter="formTest" 对应的值
        form.val("formTest", res.data.data);
        // console.log(res.data.data);
        // 给富文本编辑器设置内容
        editor.txt.html(res.data.data.content);

        // console.log(res.data.data.content);
        // console.log(res.data.data.cover_img);
        // 3. 初始化裁剪区域
        // 图片根路径  http://big-event-api-t.itheima.net
        // 最新图片
        let imgStr = "http://big-event-api-t.itheima.net" + res.data.data.cover_img;
        $image.attr("src", imgStr).cropper(options);
    });
});

// todo ========富文本编辑器效果
const E = window.wangEditor;
const editor = new E("#contentBox");
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 500; // 修改层级，避免挡住下拉框
editor.create();


// todo ============点击，选择封面按钮，显示供用户文件选择框的弹出层
$("#btnChooseCoverImage").on("click", function () {
    //  文件选择框id=fileCover 
    $("#fileCover").click()
})

// todo ========给文件域注册change 事件，更换裁剪区
$("#fileCover").on("change", function () {

    const file = this.files[0];
    // console.log(file);
    if (!file) {
        return layer.msg("请选择一张图片")
    }
    // 使用 createObjectURL 函数将file对象转换为 URL
    let imgStr = window.URL.createObjectURL(file);
    console.log(imgStr);
    // 先销毁原来的裁剪区域，destroy
    // 在添加新选择的 图片地址，attr
    // 最后重新渲染裁剪区域， options
    $image.cropper('destroy').attr("src", imgStr).cropper(options);
})

// ?=====决定文章的状态
let state;
$("#btnPublish").on("click", function () {
    state = "已发布";
})
$("#btnSave").on("click", function () {
    state = "草稿";
})


//  todo ====== 编辑更新文章
// todo ======= 获取表单数据，ajax提交数据
$("#form").on('submit', function (e) {
    e.preventDefault();
    // 接口要求 FormData格式收集数据
    // 基于 form 表单，快速创建一个 FormData 对象
    let fd = new FormData(this)   // 比写法 new FormData($(this)[0]) 好得多

    // FormData收集不到的数据，用append追加
    // 使用 editor.txt.html() 获取 html
    fd.append("content", editor.txt.html());

    // 收集文章的状态
    fd.append("state", state);
    // console.log("状态", state);

    // 收集封面数据

    // 通过.toBlob()
    $image.cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
    })
        .toBlob(function (blob) {
            // console.log("收集blob:", blob);
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到文件对象后，进行后续的操作
            // 5. 将文件对象，存储到 fd 中
            fd.append('cover_img', blob);
            // 收集id 
            fd.append("Id", id);

            // // 做个检测，可删除
            // fd.forEach((value, name) => console.log(value, name));
            // return;

            // 6. 发起 ajax 数据请求
            axios.post("/my/article/edit", fd)
                .then(res => {
                    console.log(res)

                    if (res.data.status !== 0) {
                        return layer.msg("更新文章失败");
                    }
                    // 修改成功
                    // console.log("更新文章成功");
                    layer.msg("更新文章成功",
                        { time: 1000 },
                        function () {
                            // 跳转列表页面
                            location.href = "/article/art_list.html"
                        })
                })
                .catch(err => {
                    console.error(err);
                })

            // 做个检测，可删除
            fd.forEach((value, name) => console.log(value, name));
        });
});